<script setup>
import { ref } from 'vue'
import {useRouter} from "vue-router";
import { Grid} from '@element-plus/icons-vue'
import {_resetPassword} from "../../http/api.js";
import {ElLoading, ElMessage} from "element-plus";
const router = useRouter()
const showDialog = ref(false);
const account = ref('');
const loginId = ref('');
const password = ref('');
const passwordCheck = ref('');
const passwordRepetition = ref('');

loginId.value = sessionStorage.getItem('loginId');
account.value = sessionStorage.getItem('account')||'';
setInterval(() => {
  loginId.value = sessionStorage.getItem('loginId');
  account.value = sessionStorage.getItem('account')
},5000)

const dialogVisible = ref(false);
const handleClose = () => {
  dialogVisible.value = false;
  password.value = '';
  passwordCheck.value = '';
  passwordRepetition.value = '';
}
//编辑密码
const editPassword = () => {
  console.log(loginId.value);
  if(passwordCheck.value && passwordCheck.value.length < 8) return ElMessage({type: 'warning', message: '密码长度需8-20位'});
  if(passwordCheck.value !== passwordRepetition.value) return ElMessage({message: '新密码不一致', type: 'warning' });
  const loading = ElLoading.service({lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)'});
  let params = {
    password:password.value,
    newPassword:passwordCheck.value,
    id: loginId.value
  }
  _resetPassword(params)
      .then(res => {
        console.log(res);
        loading.close();
        if(res.data.ok) {
          ElMessage({message: '修改成功', type: 'success' });
          handleClose()
        }else {
          ElMessage({message: res.data.msg||'密码错误', type: 'warning' });
        }
      })
      .catch(err => {
        console.log(err);
        loading.close();
      })
}
// 退出登录
const loginOut = () => {
  localStorage.clear();
  sessionStorage.clear();
  router.replace({ path: '/'})
}
//选择展会点击
const showProject = () => {
  showDialog.value = true;
}
// 选择展会弹框事件
const showDialogEmit = (boolean) => {
  showDialog.value = boolean;
}
</script>

<template>
<div class="header-bar-box">
  <div class="header-top">
<!--    <div class="header-title">{{ 华东进出口商品交易会管理后台 }}</div>-->
    <div class="header-select" @click="showProject">
      <el-icon size="30"><Grid /></el-icon>
      <span class="header-select-text">选择展会</span>
    </div>
  </div>
  <div class="bar-login-out">
    <span style="display: inline-block;margin-right: 20px">{{account}}</span>
    <el-link style="margin-right: 30px;font-size: 16px" v-if="account" type="primary" @click="dialogVisible = true">修改密码</el-link>
    <span @click="loginOut">退出登录</span>
  </div>
</div>
  <select-project :showDialog="showDialog" @showDialogEmit="showDialogEmit"></select-project>

  <el-dialog v-model="dialogVisible" title="修改密码" width="500" :before-close="handleClose">
    <div>
      <el-input v-model="password" style="width: 240px;margin-bottom: 10px" type="password" placeholder="请输入您的密码" />
      <el-input v-model="passwordCheck" style="width: 240px;margin-bottom: 10px" type="password" placeholder="请输入新密码" />
      <el-input v-model="passwordRepetition" style="width: 240px" type="password" placeholder="请确认密码" />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editPassword">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.header-bar-box{
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #ffffff;
  .header-top{
    padding: 15px;
    display: flex;
    align-items: center;
    .header-title{
      font-weight: 700;
      font-size: 32px;
    }
    .header-select{
      display: flex;
      align-items: center;
      margin-left: auto;
      cursor: pointer;
      .header-select-text{
        margin-left: 5px;
      }
    }
  }
  .bar-login-out{
    margin-left: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
}
</style>